import { createRouter, createWebHistory } from 'vue-router'
import Layout from '@/layout/index.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'layout',
      component: Layout,
      children: [
        {
          path: '/',
          name: 'home',
          component: () => import('../views/HomeView.vue'),
        },
        {
          path: '/about',
          name: 'about',
          // route level code-splitting
          // this generates a separate chunk (About.[hash].js) for this route
          // which is lazy-loaded when the route is visited.
          component: () => import('../views/AboutView.vue'),
        },
        {
          path: '/vue3/reactivity',
          name: 'Reactivity',
          component: () => import('@/views/vue3/Reactivity.vue'),
        },
        {
          path: '/vue3/lifecycle',
          name: 'Lifecycle',
          component: () => import('@/views/vue3/Lifecycle.vue'),
        },
        {
          path: '/vue3/template-syntax',
          name: 'TemplateSyntax',
          component: () => import('@/views/vue3/TemplateSyntax.vue'),
        },
        {
          path: '/vue3/components',
          name: 'Components',
          component: () => import('@/views/vue3/Components.vue'),
        },
        {
          path: '/vue3/slots',
          name: 'Slots',
          component: () => import('@/views/vue3/Slots.vue'),
        },
        {
          path: '/vue3/provide',
          name: 'Provide',
          component: () => import('@/views/vue3/Provide.vue'),
        },
        {
          path: '/vue3/async-components',
          name: 'AsyncComponents',
          component: () => import('@/views/vue3/AsyncComponents.vue'),
        },
        {
          path: '/vue3/directive',
          name: 'Directive',
          component: () => import('@/views/vue3/Directive.vue'),
        },
        {
          path: '/vue3/comp-vmodel',
          name: '自定义指令',
          component: () => import('@/views/vue3/CompVModel.vue'),
        },
        {
          path: '/vue3/event-bus',
          name: 'EventBus',
          component: () => import('@/views/vue3/Bus.vue'),
        },
        {
          path: '/vue3/fragment',
          name: 'Fragment',
          component: () => import('@/views/vue3/Fragment.vue'),
        },
        {
          path: '/vue3/suspense',
          name: 'Suspense',
          component: () => import('@/views/vue3/Suspense.vue'),
        },
        {
          path: '/vue3/teleport',
          name: 'Teleport',
          component: () => import('@/views/vue3/Teleport.vue'),
        },
        {
          path: '/vue3/keepalive',
          name: 'Advanced',
          component: () => import('@/views/vue3/KeepAlive.vue'),
        },
        {
          path: '/vue3/composition',
          name: 'Composition',
          component: () => import('@/views/vue3/Composition.vue'),
        },
        {
          path: '/vue-router/basic',
          name: 'VRBasic',
          component: () => import('@/views/vuerouter/Basic.vue'),
        },
        {
          path: '/vue-router/dynamic',
          name: 'Dynamic',
          component: () => import('@/views/vuerouter/Dynamic.vue'),
        },
        {
          path: '/vue-router/nested',
          name: 'Nested',
          component: () => import('@/views/vuerouter/Nested.vue'),
        },
        {
          path: '/vue-router/guards',
          name: 'Guards',
          component: () => import('@/views/vuerouter/Guards.vue'),
        },
        {
          path: '/vue-router/meta',
          name: 'Meta',
          component: () => import('@/views/vuerouter/Meta.vue'),
        },
        {
          path: '/vue-router/programmatic',
          name: 'Programmatic',
          component: () => import('@/views/vuerouter/Programmatic.vue'),
        },
        {
          path: '/pinia',
          name: 'Pinia',
          component: () => import('@/views/pinia/index.vue'),
        },
        {
          path: '/demo/todo',
          name: 'Todo',
          component: () => import('@/views/demo/Todo.vue'),
        },
        {
          path: '/demo/product-list',
          name: 'ProductList',
          component: () => import('@/views/demo/ProductList.vue'),
        },
        {
          path: '/demo/cart',
          name: 'Cart',
          component: () => import('@/views/demo/ShopCart.vue'),
        },
        {
          path: '/demo/user-manage',
          name: 'UserManage',
          component: () => import('@/views/demo/UserManage.vue'),
        },
      ],
    },
  ],
})

export default router
